<template>
	<a-layout>
		<view style="margin-top: 40px;">
			<image class="logo-img" :src="headimgurl || headImg" @error="imgError" />
			<view class="head-text-view">
				<text>{{user.name}}</text>
				<text>{{user.idCard}}</text>
				<text>{{user.telephone}}</text>
				<text v-if="user.stuNumber">学号：{{ user.stuNumber }}</text>
			</view>
		</view>
		<a-scroll :no-data-style="{backgroundColor:`transparent`,height:`60vh`}" :request="get" ref="aScroll" :parm="{pageSize:3000}">
			<template #item="{row,index}">
				<a-grid class='grid' :list="row" :cell="3" :closeHeight="true">
					<template #default="{row}">
						<navigator hover-class="none" class="navigator" :url="row.menuRoute" :style="{color:row.color}">
							<view class="iconfont" :class="row.menuRemarks"></view>
							<view style="color:inherit;font-size: .7em;margin-top: .2em;">{{ row.menuName }}</view>
						</navigator>
					</template>
				</a-grid>
				<br/>
			</template>
		</a-scroll>
	</a-layout>
</template>

<script>
	export default {
		computed: {
			user() {
				return {...this.$store.state.userInfo,...this.userInfo};
			},
			navList() {
				return [{
						name: '班级通讯录',
						color: '#38B0DE',
						icon: 'icon-tongxunlu',
						path: '/pages/AddressBook/AddressBook',
						badge: 100,
					},
					{
						name: '课程表',
						color: '#6495ED',
						icon: 'icon-kecheng',
						path: '/pages/ClassSchedule/ClassSchedule',
						badge: 5,
					},
					{
						name: '通知通告',
						color: '#FF7F50',
						icon: 'icon-notice',
						path: '/pages/Notice/Notice',
						badge: 20,
					},
					{
						name: '请假申请',
						color: '#38B0DE',
						icon: 'icon-qingjia',
						path: '/pages/AskForLeave/AskForLeave'
					},
					{
						name: '家庭作业',
						color: '#6495ED',
						icon: 'icon-zuoye',
						path: '/pages/operation/operation'
					},
					{
						name: '考试成绩',
						color: '#6a6a00',
						icon: 'icon-kaoshi',
						path: '/pages/TestScore/TestScore',
						badge: 5,
					},
					{
						name: '出入校记录',
						color: '#006200',
						icon: 'icon-churu',
						path: '/pages/InAndOut/InAndOut',
						badge: 5,
					},
					{
						name: '个人中心',
						color: '#5555ff',
						icon: 'icon-gerenzhongxinwoderenwubiaozhuntouxianxing',
						path: '/pages/PersonalCenter/PersonalCenter',
						badge: 5
					}
				]
			},
			headImg(){
				return this.user.headimgurl || (this.user.sex === '女'?this.girl:this.boy);
			}
		},
		onLoad(e) {
			this.getInfo();
		},
		watch: {
			'$store.state.loginStatus'(n) {
				n && this.getInfo();
			}
		},
		data() {
			return {
				userInfo:{},
				headimgurl:'',
				boy:require('./1.png'),
				girl:require('./2.png')
			};
		},
		methods:{
			imgError(){
				this.headimgurl = this.user.sex === '女'?this.girl:this.boy;
			},
			getInfo(){
				this.$store.dispatch('getInfo').then(res=>{
					this.userInfo = res;
				});
			},
			get(parm = {}) {
				return this.$http.selectLoginUserMenu({
					...parm
				}).then(res => {
					res = Array.isArray(res)?res:[];
					return {
						total: 0,
						data: [[...res]]
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.logo-img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
		display: block;
		transform: translateY(-10%);
	}

	.head-text-view {
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color:#fff;
	}
	.grid{
		margin: 20px 30px;
		background-color: #fff;
		box-shadow: 0 1px 8px 0 rgba(0,0,0,.2);
		border-radius: 8px;
		overflow: hidden;
		.navigator{
			min-height: 90px;
			font-size: 16px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.iconfont{
				font-size: 1.4em;
			}
		}
	}
</style>
